<template>
  <div class="handle-way">
    <span @click="isPopShow=true">
      <van-icon
      class="icon"
      name="chat-o"
      />
      评论</span>
    <span @click="like">
      <van-icon
        class="icon"
        :class="isLiking ? 'yellow' : ''"
        :name="isLiking ? 'good-job' : 'good-job-o'"
      />
      点赞</span>
    <span @click="collect">
      <van-icon
        class="icon"
        :class="isCollected ? 'yellow' : ''"
        :name="isCollected ? 'star' : 'star-o'"
      />
      收藏</span>
    <van-popup
      v-model="isPopShow"
      position="bottom"
    >
      <CommentPost
        :target="target"
        @postSuccess="isPopShow=false"
      />
    </van-popup>
  </div>
</template>

<script>
import CommentPost from '@/components/comment-post'
import { likeArticle, UnLikeArticle } from '@/api/articles'
export default {
  name: 'HandleWay',
  components: {
    CommentPost
  },
  props: {
    target: {
      type: [Number, String, Object],
      required: true
    },
    isLiked: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      isPopShow: false,
      isCollected: false,
      isLiking: this.isLiked
    }
  },
  methods: {
    async like () {
      try {
        if (!this.isLiked) { // 没点赞，点击后点赞
          await likeArticle(this.target)
        } else {
          await UnLikeArticle(this.target)
        }
      } catch (err) {
        this.$toast('点赞失败')
      }
      this.isLiking = !this.isLiking
    },
    async collect () {
      try {
        if (!this.isLiked) { // 没点赞，点击后点赞
          await likeArticle(this.target)
        } else {
          await UnLikeArticle(this.target)
        }
      } catch (err) {
        this.$toast('点赞失败')
      }
      this.isCollected = !this.isCollected
    }
  }
}
</script>

<style lang="less">
.yellow {
  color: orange;
}
.handle-way {
  display: flex;
  background-color: #fff;
  span {
    flex: 1;
    text-align: center;
    line-height: 93px;
    font-size: 28px;
    color: #333333;
    border-right: 1px solid #ccc;
    .icon {
      font-size: 40px;
    }
  }
}
</style>
